* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.box {
  width: 400px;
  height: 300px;
  background-color: #4AD3B4;
  margin: 100px auto;
  position: relative;
}
.box .left {
  width: 50px;
  height: 50px;
  background-color: #fff;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: left 0.7s 2s alternate infinite;
}
.box .right {
  width: 50px;
  height: 50px;
  background-color: #fff;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: right 0.7s 2s alternate infinite;
}
@keyframes left {
  0% {
    transform: translate(-50%, -50%) translate(-100px);
    background-color: rgba(255, 255, 255, 0.3);
  }
  50% {
    transform: translate(-50%, -50%) translate(0);
    background-color: #fff;
  }
  100% {
    transform: translate(-50%, -50%) translate(100px);
    background-color: rgba(255, 255, 255, 0.3);
  }
}
@keyframes right {
  0% {
    transform: translate(-50%, -50%) translate(100px);
    background-color: rgba(255, 255, 255, 0.3);
  }
  50% {
    transform: translate(-50%, -50%) translate(0);
    background-color: #fff;
  }
  100% {
    transform: translate(-50%, -50%) translate(-100px);
    background-color: rgba(255, 255, 255, 0.3);
  }
}
